<script lang="ts" setup>
  import { computed } from 'vue';
  import { ConfigProvider, Skeleton, SkeletonLine } from '@arco-design/web-vue';
  import { RouterView, useRoute } from 'vue-router';
  import IconNoData from '/@/assets/recommend/no_data.svg';
  import UserModal from '/@/components/Connect/src/UserModal.vue';
  import { useUserStore } from '/@/store/modules/user';

  const userStore = useUserStore();
  const route = useRoute();
  const isFullPage = computed(() => {
    return route.meta.isFullPage;
  });
</script>

<template>
  <ConfigProvider>
    <RouterView name="header" />
    <div class="app-container">
      <div class="mx-auto" :class="{ 'max-w-[1240px] p-[12px]': !isFullPage }">
        <RouterView />
      </div>
    </div>
    <RouterView name="footer" />
    <template #loading>
      <div class="bg-white h-full w-full overflow-hidden p-[20px]">
        <Skeleton animation>
          <SkeletonLine :rows="20" />
        </Skeleton>
      </div>
    </template>
    <template #empty>
      <div class="w-[200px] h-[200px] mt-[100px] mx-auto">
        <img :src="IconNoData" />
      </div>
    </template>
    <UserModal v-model:visible="userStore.showLogin" />
  </ConfigProvider>
</template>

<style scoped>
  .app-container {
    background: linear-gradient(180deg, #cbd8fa -14.51%, rgba(217, 217, 217, 0) 100%);
  }
</style>
